import QtQuick 1.0

Rectangle {
    id: root
    width: 320
    height: 240
    opacity: 1

    property int currentIndex: -1

    //focus: true

    signal forward()

    Component {
        id: borisDelegate
        Item {
            id: borisItem
            width: parent.width; height: 80

            state: "small"

            MouseArea {
                   anchors.fill: parent
                   onClicked: {
                       //borisItem.state == "small" ? borisItem.state="large" : borisItem.state="small";
                       console.log("ye-ye");
                       //root.clicked();
                   }
            }

            Column {
                //width: 240; height:  80
                Text { text: '<b>' + name + '</b> '; /*font.pointSize: 11*/ }
                Text { text: ' <b>Distance:</b> ' + mainWindow.format(model.modelData.distance) }
                Text { text: ' <b>Bearing:</b> ' + model.modelData.bearing }
            }

            Compass {
                id: compass
                width: parent.height; height: parent.height
                y: parent.height - 80; x: parent.width - 80
                bearing: model.modelData.bearing
            }

            Keys.onPressed: {
                console.log("key pressed: " + event.key)
                if (event.key == Qt.Key_Right) {
                    console.log("->")
                    borisItem.state == "small" ? borisItem.state="large" : borisItem.state="small";
                }
                else if (event.key == Qt.Key_Left) {
                    console.log("<-")
                    borisItem.state == "large" ? borisItem.state="small" : borisItem.state="large";
                }
                else if (event.key == 16842752) {
                    console.log("||")
                    root.forward()
                }
            }


            states: [
                State {
                    name: "small"
                    PropertyChanges { target: borisItem;   width: 320; height: 80; }
                    PropertyChanges { target: compass;   width: 80; height: 80; }
                    PropertyChanges { target: borisView;  highlight: highlighter1; }
                },
                State {
                    name: "large"
                    PropertyChanges { target: borisItem;   width: 320; height: 240; }
                    PropertyChanges { target: compass;   y: 0; x: parent.width - 240; width: parent.height; height: parent.height; }
                    PropertyChanges { target: borisView;  highlight: highlighter2; }

                }    ]

            transitions: [
                Transition {
                    from: "*"; to: "*"
                    NumberAnimation {
                        properties: "x,y,width,height"
                        easing.type: Easing.InOutQuart
                        duration: 600
                    }
                }
            ]


        }
    }

    Component {
        id: highlighter1;
        Rectangle {
            color: "lightsteelblue";
            //border.width: 1;
            radius: 6
        }
        /*
        Item {
            Image {
                source: "qrc:///images/highlighterbackground1.svg"
                width: parent.width
                height: parent.height
            }
        }
        */
    }

    Component {
        id: highlighter2;
        Rectangle {
            color: "white";
            //border.width: 1;
            radius: 6
        }
    }

    ListView {
        id: borisView
        anchors.fill: parent
        model: borisModel
        delegate: borisDelegate
        highlight: highlighter1
        focus: true
        width: parent.width
        height: parent.height
        spacing: 1

        MouseArea {
               anchors.fill: parent
               onClicked: {
                   //borisItem.state == "small" ? borisItem.state="large" : borisItem.state="small";
                   console.log("ye-ye");
                   //root.clicked();
               }
        }
    }

}
